<template>
  <div class="custom-form">
    <Layout class="custom-form-container">
      <!-- 左边内容 -->
      <LayoutSider width="280" class="!bg-[#f5f6f6]">
        <div class="left-sidebar">
          <div v-for="(item, compIndex) of leftComponents" :key="compIndex">
            <div class="title">
              {{ item.title }}
            </div>
            <Draggable
              v-model="item.list"
              item-key="id"
              draggable=".components-item"
              :sort="false"
              :clone="cloneComponent"
              :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
              @end="onEnd"
              class="left-sidebar-draggable"
              ghostClass="ghost"
            >
              <template #item="{ element }">
                <div class="components-item" @click="store.addComponent(element)">
                  <Icon :icon="element.tagIcon" class="mr-2.5 ml-2.5" size="16" />
                  <span class="text-xs">{{ element.__config__.label }}</span>
                </div>
              </template>
            </Draggable>
          </div>
        </div>
      </LayoutSider>
      <!-- 中间内容 -->
      <Layout>
        <LayoutContent class="center-content">
          <Form v-bind="formConf">
            <Row :gutter="formConf.gutter">
              <Draggable
                v-model="drawingList"
                item-key="id"
                group="componentsGroup"
                tag="transition-group"
                :animation="340"
                :component-data="{ name: 'fade' }"
                class="center-content-draggable"
                ghostClass="comp-ghost"
              >
                <template #item="{ element, index }">
                  <DraggableItem :item="element" :index="index" />
                </template>
              </Draggable>
              <div v-show="!drawingList.length" class="empty-info"> </div>
            </Row>
          </Form>
        </LayoutContent>
      </Layout>
      <!-- 右边内容 -->
      <LayoutSider width="300" theme="light">
        <template v-if="drawingList.length">
          <RightPanel />
        </template>
        <template v-else> 未选中组件 </template>
      </LayoutSider>
    </Layout>
  </div>
</template>
<script lang="tsx" setup>
  import { toRefs } from 'vue';
  import Draggable from 'vuedraggable-es';
  import { Layout, LayoutSider, LayoutContent, Row, Form } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import { useFormStore } from '/@/store/modules/workFlow/form';
  import DraggableItem from './src/DraggableItem.vue';
  import RightPanel from './src/RightPanel.vue';
  const store = useFormStore();
  const { drawingList, leftComponents, formConf, activeComp } = toRefs(store);

  /**
   * 拖拽添加组件
   */
  const onEnd = ({ from, to }) => {
    if (from !== to) {
    }
  };
  /**
   * 拖拽克隆当前组件
   */
  const cloneComponent = (origin) => {
    store.cloneComponent(origin);
    return activeComp.value;
  };
</script>
<style lang="less" scoped>
  @import './src/index.less';

  .empty-info {
    width: 500px;
    height: 500px;
    background: url(/@/assets/images/bg-drag.png) no-repeat;
    background-size: 500px 500px;
    margin: 0 auto;
    margin-top: 10%;
  }
</style>
